<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="${request.contextPath}/static/ihomeStatic/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/font-awesome.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/animate.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/style.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/layer/mobile/need/layer.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/treeTable/css/treeTable.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/icheck/css/custom.css" rel="stylesheet">

    <style>
        input[type="checkbox"] {
            text-indent:0;
            margin: 0;
            width: 17px;
            height: 17px;
            text-align:center;
            display: inline-block;
            vertical-align: middle;
            line-height: 15px;
            position: relative;
        }
        input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #bdbfc2;
        }
        input[type="checkbox"]:checked::before {
            content: "\2713";
            background-color: #37b048;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 12px;
            font-weight: bold;
            outline: none;
            border-color:#ccc;
            border: 1px solid #bdbfc2;
        }
    </style>

</head>
<body>
<input type="hidden" id="hi1">

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>菜单管理</h2>
        <ol class="breadcrumb">
            <li>
                <a href="/">控制台</a>
            </li>
            <li class="active">
                <strong>菜单管理</strong>
            </li>
        </ol>
    </div>

    <div class="col-sm-8">
        <div class="title-action">
            <a href="javascript:;" onclick="addChild('')" class="btn btn-primary"><i class="fa fa-pencil"></i> 添加</a>
            <!-- 增加按钮 -->
        </div>
    </div>

</div>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-content">


            <form id="listForm" method="post">

                <div class="row">
                    <table id="treeTable" style="font-size: 10px;" class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
                        <thead>
                        <tr>
                            <th><input type="checkbox" class="i-checks"></th>
                            <th>名称</th>
                            <th>链接</th>
                            <th>排序</th>
                            <th>可见</th>
                            <th>菜单类型</th>
                            <th>权限标识</th>
                            <th>操作</th>

                        </tr>
                        </thead>
                        <tbody>
                        <#if menuList ??>
                            <#list menuList as parent>
                                <tr id="${parent.menuId}" pId="${parent.parentId}">
                                    <td>
                                        <input type="checkbox" class="i-checks">
                                    </td>
                                    <td><a href="javascript:;" onclick="view('${parent.menuId}')">${parent.menuName}</a></td>
                                    <td>${parent.url}</td>
                                    <td><input type="text" class="form-control" value="${parent.orderNum}" style="width:100px;margin:0;padding:0;text-align:center;"></td>
                                    <td>

                                        <#if parent.visible=='0'>
                                            显示
                                        </#if>
                                        <#if parent.visible=='1'>
                                            隐藏
                                        </#if>

                                    </td>
                                    <td>

                                        <#if parent.menuType=='M'>
                                            目录
                                        </#if>
                                        <#if parent.menuType=='C'>
                                            菜单
                                        </#if>
                                        <#if parent.menuType=='F'>
                                            按钮
                                        </#if>

                                    </td>
                                    <td>${parent.perms}</td>
                                    <td nowrap>
                                        <a href="javascript:;" onclick="view('${parent.menuId}')"
                                           class="btn btn-info btn-xs"><i class="fa fa-search-plus"></i> 查看</a>
                                        <a href="javascript:;" onclick="update('${parent.menuId}')"
                                           class="btn btn-success btn-xs"><i class="fa fa-edit"></i> 修改</a>
                                        <a href="javascript:;" onclick="updateStatus('${parent.menuId}')" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> 删除</a>
                                        <a href="javascript:;" onclick="addChild('${parent.menuId}')"
                                           class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> 添加下级菜单</a>
                                    </td>
                                </tr>
                            </#list>
                        </#if>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
</div>
</body>
<script src="${request.contextPath}/static/ihomeStatic/js/jquery-1.12.4.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/layer/layer.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/treeTable/js/jquery.treeTable.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/icheck/js/icheck.min.js"></script>
<script>
    $(document).ready(function () {
        $("#treeTable").treeTable({expandLevel: 1, column: 1}).show();
    });
    function addChild(parentId){
        layer.open({
            type: 2,
            area: ['700px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '${request.contextPath}/menuManage/toAdd?parentId='+parentId,
            end: function () {
                    if($("#hi1").val() == "1"){
                        layer.msg('成功', {icon: 1});
                        window.location.reload();
                    }else {

                    }

            }
        });
    }

    function view(id) {
        layer.open({
            type: 2,
            area: ['700px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '${request.contextPath}/menuManage/view?id='+id,
        });
    }

    function update(id) {
        layer.open({
            type: 2,
            area: ['700px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '${request.contextPath}/menuManage/toUpdate?id='+id,
            end: function () {
                if($("#hi1").val() == "1"){
                    layer.msg('成功', {icon: 1});
                    window.location.reload();
                }else {

                }

            }
        });
    }

    function updateStatus(id) {
        layer.confirm('是否确定删除？', {
            btn: ['是','否'] //按钮
        }, function(){
            $.ajax({
                url:"${request.contextPath}/menuManage/delete",
                type:"GET",
                data:{"id":id},
                success:function (data) {
                    if(data){
                        layer.msg('成功', {icon: 1});
                        window.location.reload();
                    }
                }
            });
        }, function(){
        });
    }







</script>

</html>
